 //1.元素、节点查找
 //querySelector得到的结果是一个元素，会查找到满足要求的第一个元素
 var item6 = document.querySelector('#item6');
 var item66 = document.querySelectorAll('#item6');
 var item1 = document.querySelector('.item');

 //querySelectorAll得到的结果是一个NodeList，类似数组的一个节点集合，可以通过下标访问
 var items = document.querySelectorAll('.item');
 //会得到所有满足条件的一个HTMLCollection，则是一个元素的集合
 var items1 = document.getElementsByClassName('item');

 var previtem = items1[1].previousElementSibling;
 var nextitem = items1[1].nextElementSibling;

 var sub_menu1 = document.querySelectorAll('.sub-menu')[1];
 //children 返回HTMLCollection集合
 var sub_menu1_chi = sub_menu1.children
     //childNodes 返回NodeList集合，包含空白文本节点
 var sub_menu1_chi1 = sub_menu1.childNodes

 var i6m = item6.querySelector('.sub-menu')

 //创建节点
 var p = document.createElement('p');
 //给元素插入内容
 p.innerText = "新加的内容------";
 p.setAttribute("title", "只在上港试试");
 //操作id
 //  p.id = 'p1'
 //操作class
 p.setAttribute("id", 'p1');
 p.classList.add('pp1')

 var pString = "<p>插入的内容</p>"
     //在item6里面的最前面插入 ::before
 item6.prepend(p)

 var h2 = document.createElement('div');
 //注意innerText 和 innerHtml的区别
 h2.innerHTML = "<span> div里面的span</span>"

 item6.append(h2)

 function strToHtml(str) {
     var div = document.createElement('div');
     div.innerHTML = str;
     return div.children[0]
 }

 var p2 = document.getElementById('p2');

 var ni = document.createElement('li');
 ni.innerText = "通过before方法";

 //  insertAdjacentHTML
 // - beforebegin：在当前元素节点的前面。
 // - afterbegin：作为当前元素的第一个子元素插入。
 // - afterend：在当前元素节点的后面。
 // - beforeend：作为当前元素的最后一个子元素插入。*/

 //  el.style.*
 // 把css属性的连接线转换为驼峰的方式
 var radios = document.querySelectorAll('input[type=radio]');
 //  radios[0].onchange = function() {
 //      alert(radios[0].value)
 //  }
 //  radios[1].onchange = function() {
 //      alert(radios[1].value)
 //  }
 //  radios[2].onchange = function() {
 //      alert(radios[2].value)
 //  }
 radios.forEach(function(el) {
     el.onchange = function() {
         alert(el.value)
     }
 })